<template>
  <div class="sysConfig">
    <el-tabs tab-position="top" type="border-card" @tab-click="switchTabs" :value="tabsValue">

      <el-tab-pane v-for="(item,index) in tabsColumData" :key='index' :label="item.title" :name='item.key' lazy>
        <el-button type="success" @click='addConfig(item)'>添加配置</el-button>
        <!-- 代理人推荐配置 -->
        <template v-if="item.key == 'agent_distribution'">
          <el-card v-for="(ListItem,ListIndex) in configList" :key='ListIndex' class='distributionConfig-item'>
            <span>配置名称：</span><span class="font_warning">{{ ListItem.name }}</span>
            <span class='ml50'>订单类型：</span><span class="font_warning">{{ ListItem.key | typeFilterLowercase }}</span>
            <span class='item-title ml50'>奖励金额(元)：</span><span class="font_success">{{ ListItem.value}}</span>
            <el-button class="item-button ml10" type="danger" size="small" @click='deleteConfig(ListItem, item)'>删除配置</el-button>
            <el-button class="item-button" type="warning" size="small" @click='updateConfig(ListItem,item)'>更新配置</el-button>
          </el-card>
        </template>
        <!-- 用户积分配置 -->
        <template v-if="item.key == 'consumer_distribution'">
          <el-card v-for="(ListItem,ListIndex) in configList" :key='ListIndex' class='distributionConfig-item'>
            <span>配置名称：</span><span class="font_warning">{{ ListItem.name }}</span>
            <span class='item-title ml50'>配置值：</span><span class="font_success">{{ ListItem.value}}</span>
            <el-button class="item-button ml10" type="danger" size="small" @click='deleteConfig(ListItem, item)'>删除配置</el-button>
            <el-button class="item-button" type="warning" size="small" @click='updateConfig(ListItem, item)'>更新配置</el-button>
          </el-card>
        </template>
        <!-- 用户vip积分配置 -->
        <template v-if="item.key == 'consumer_vip_points'">
          <el-card v-for="(ListItem,ListIndex) in configList" :key='ListIndex' class='distributionConfig-item'>
            <span>配置名称：</span><span class="font_warning">{{ ListItem.name }}</span>
            <el-button class="item-button ml10" type="danger" size="small" @click='deleteConfig(ListItem, item)'>删除配置</el-button>
            <el-button class="item-button" type="warning" size="small" @click='updateConfig(ListItem, item)'>更新配置</el-button>
            <div class="item-details">
              <ul>
                <li>
                  <el-row :gutter="20">
                    <el-col :span="6">
                      <div class='item-details-list clearfloat'>
                        <span class="item-details-list-label">最低额度：</span>
                        <span class='item-details-list-content el-blue'>{{ JSON.parse(ListItem.value).min }}</span>
                      </div>
                    </el-col>
                    <el-col :span="6">
                      <div class='item-details-list clearfloat'>
                        <span class="item-details-list-label">最高额度：</span>
                        <span class='item-details-list-content el-blue'>{{ JSON.parse(ListItem.value).max }}</span>
                      </div>
                    </el-col>
                  </el-row>
                </li>
                <li>
                  <el-row :gutter="20">
                    <el-col :span="6">
                      <div class='item-details-list clearfloat'>
                        <span class="item-details-list-label">最小兑换积分：</span>
                        <span class='item-details-list-content el-blue'>{{ JSON.parse(ListItem.value).min_exchange }}</span>
                      </div>
                    </el-col>
                    <el-col :span="6">
                      <div class='item-details-list clearfloat'>
                        <span class="item-details-list-label">最大兑换积分：</span>
                        <span class='item-details-list-content el-blue'>{{ JSON.parse(ListItem.value).max_exchange }}</span>
                      </div>
                    </el-col>
                  </el-row>
                </li>
                <li>
                  <div class='item-details-list clearfloat'>
                    <span class="item-details-list-label">兑换比例：</span>
                    <span class='item-details-list-content el-blue'>{{ JSON.parse(ListItem.value).ratio }}</span>
                  </div>
                </li>
              </ul>
            </div>
          </el-card>
        </template>

      </el-tab-pane>

    </el-tabs>
    <addDstributionConfigDialog ref='addDstributionConfigDialog' @getData='getConfigList'></addDstributionConfigDialog>
    <addConsumerDistributionDialog ref='addConsumerDistributionDialog' @getData='getConfigList'></addConsumerDistributionDialog>
    <updateDstributionConfigDialog ref='updateDstributionConfigDialog' @getData='getConfigList'></updateDstributionConfigDialog>
    <updateConsumerDistributionDialog ref='updateConsumerDistributionDialog' @getData='getConfigList'></updateConsumerDistributionDialog>
    <addConsumerVipPointsDialog ref='addConsumerVipPointsDialog' @getData='getConfigList'></addConsumerVipPointsDialog>
    <updateConsumerVipPointsDialog ref='updateConsumerVipPointsDialog' @getData='getConfigList'></updateConsumerVipPointsDialog>
  </div>
</template>

<script>
// 添加代理人推荐配置
import addDstributionConfigDialog from './components/addDstributionConfig'
// 更新推荐配置
import updateDstributionConfigDialog from './components/updateDstributionConfig'
// 添加用户推荐配置
import addConsumerDistributionDialog from './components/addConsumerDistributionDialog'
// 更新用户推荐配置
import updateConsumerDistributionDialog from './components/updateConsumerDistributionDialog'
// 添加用户vip积分配置
import addConsumerVipPointsDialog from './components/addConsumerVipPointsDialog'
// 更新用户vip积分配置
import updateConsumerVipPointsDialog from './components/updateConsumerVipPointsDialog'
export default {
  data () {
    return {
      distributionConfigData: [],
      tabsColumData: [],
      configList: [],
      tabsValue: 'agent_distribution'
    }
  },
  components: {
    addDstributionConfigDialog,
    updateDstributionConfigDialog,
    addConsumerDistributionDialog,
    updateConsumerDistributionDialog,
    addConsumerVipPointsDialog,
    updateConsumerVipPointsDialog
  },
  created () {
    this.getTabsColumn()
    let params = {
      key: 'agent_distribution'
    }
    this.getConfigList(params)
  },
  methods: {
    // 获取栏目列表
    getTabsColumn () {
      this.$axios.get('api/config_setting/category').then(res => {
        if (res.data.code == 200) {
          this.tabsColumData = res.data.data
        }
      })
    },
    // 获取系统配置列表配置
    getConfigList (data) {

      let params = {
        category: data.key
      }
      this.$axios.get('api/config_setting', {params: params}).then(res => {
        if (res.data.code == 200) {
          this.configList = res.data.data
        }
      })
    },
    // 切换选项卡
    switchTabs(tabs) {
      let params = {
        key: tabs.name,
      }
      this.getConfigList(params)
    },
    // 添加配置
    addConfig (data) {
      // 添加代理人推荐配置
      if (data.key == 'agent_distribution') {
        this.$refs.addDstributionConfigDialog.show(data)
      }
      // 用户推荐配置
      else if (data.key == 'consumer_distribution') {
        this.$refs.addConsumerDistributionDialog.show(data)
      }
      // 用户vip 积分配置
      else if (data.key == 'consumer_vip_points') {
        this.$refs.addConsumerVipPointsDialog.show(data)
      }
    },
    // 更新推荐配置
    updateConfig (data, item) {

      // 更新代理人推荐配置
      if (item.key == 'agent_distribution') {
        this.$refs.updateDstributionConfigDialog.show(data, item)
      }
      // 用户推荐配置
      else if (item.key == 'consumer_distribution') {
        this.$refs.updateConsumerDistributionDialog.show(data, item)
      }
      // 用户vip 积分配置
      else if (item.key == 'consumer_vip_points') {
        this.$refs.updateConsumerVipPointsDialog.show(data, item)
      }
    },
    // 删除系统配置
    deleteConfig(data, item) {

      this.$confirm('此操作将删除配置, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        center: true,
        type: 'warning'
      }).then(() => {
        let params = {
          id: data.id
        }
        this.$axios.delete('api/config_setting', {params:params}).then(res => {
          if(res.data.code == 200) {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.getConfigList(item)
          } else if (res.data.code == 400) {
            this.$message.error(res.data.message)
          }
        })

      }).catch(() => {
      })
    }
  }
}
</script>

<style lang='less' type='text/css'>
  .sysConfig {
    height: 100%;
    .ml50 {
      margin-left: 50px;
    }
    .el-tabs {
      height: 100%;
      .distributionConfig-item {
        margin-top: 10px;
        span {
          font-size: 16px;
        }
        .item-button {
          float: right;
          span {
            font-size: 14px;
          }
        }
        .item-details {
          margin-left: 20px;
          span {
            font-size: 14px;
          }
          ul {
            li {
              list-style: none;
            }
          }
          &-list{

            &-label {
              width: 120px;
              text-align: left;
              vertical-align: middle;
              float: left;
              line-height: 20px;
              padding: 0 12px 0 0;
              box-sizing: border-box;
            }
            &-content {
              position: relative;
              line-height: 20px;
            }
          }
        }
        .el-card__body {
          line-height:30px;
        }
      }
    }
  }
</style>
